<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>患者查报告</title>
		<meta http-equiv="expires" content="0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/reset.css" />
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link rel="stylesheet" href="../../css/iconfont.css" />
		<link rel="stylesheet" href="../../css/cmms.css" />
		<link rel="stylesheet" href="../../css/patient/reportSearch.css"/>
		<link rel="stylesheet" href="../../css/sale/orderDetail.css" />
		<link rel="stylesheet" type="text/css" href="../../css/doctor/project/common.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/patient/preview.css"/>
		<script src="../../js/vconsole.min.js"></script>
	</head>
	<style type="text/css">
		
	</style>
	<body>
		<div id="report">
			<div class="mui-content" id="reportSearch" v-cloak :class="{'hidden':isShow}">
			    <div class="wrap">
			    	<div class="contain">
			    		<p>报告单自助查询</p>
			    		<div class="panel">
			    			<ul>
			    				<li class="mui-table-view-cell"><span>患者姓名：</span><input type="text" v-model="patientName" placeholder="请输入患者姓名"/></li>
			    				<li class="mui-table-view-cell"><span>检验条形码：</span><input type="text" v-model="barCode" placeholder="请输入检验条形码"/></li>
			    			</ul>
			    			<button @tap="search">查询</button>
			    		</div>
			    	</div>
			    </div>
			</div>
			<div id="orderDetail" v-cloak :class="{'hidden':!isShow}">
				<ul class="report">
					<li class="row1">
						<span class="name">{{detailMsg.patientName}}</span>
						<span class="sex">（{{detailMsg.patientSex=='1'?'女':'男'}} {{detailMsg.patientAge}}{{detailMsg.patientAgeUnit}}）</span>
						<span class="right basic-color">
							<i class="icon iconfont icon-shijian-"></i>
							{{detailMsg.orderState+''|formatStatePatient}}
						</span>
					</li>
					<li class="row2" >
						<span v-for='s in detailMsg.specimenBarCodes'>检验条形码：{{s.specimenBarcode}}</span>
						<span class="right">{{detailMsg.submitTime}}</span>
					</li>
					<li class="row3">
						<ul>
							<li v-for='l in detailMsg.orderProjects'>
								<span>{{l.projectName}}</span>
								<span class="right">
									<span>¥{{l.marketPrice}}</span>
								</span>
							</li>
						</ul>
					</li>
					<li class="row4">
						共 <span class="basic-color">{{detailMsg.orderProjectNumber}}</span> 个检验项目
						<span class="right">总金额：{{detailMsg.marketPriceTotal}}</span>
					</li>
					<!--<li class="row5" v-if='detailMsg.orderState == 9'>
						<div>
							<i class="icon iconfont icon-pdf basic-color"></i>
							查看报告
						</div>
					</li>-->
					<li class="row6" v-if="detailMsg.attachmentIds!==undefined&&detailMsg.attachmentIds.length>0">
						<p>报告单详情(点击小图可预览大图)</p>
						<div class="imgBoxIcon">
							<span v-for="prviewImg in prviewSrc"><img id="headImg" class="headPic"  :src="prviewImg" :data-preview-src="prviewImg" data-preview-group="1" data-content="这里是文字说明"></span>
						</div>
					</li>
				</ul>
				<!--报告解读-->
				<div class="reportDetail" v-if="detailMsg.reportVos&&detailMsg.reportVos.length>0" v-for="reportVo in detailMsg.reportVos">
					<p><span>{{reportVo.orderItem}}</span></p>
					<ul class="detailItem" >
						<!--<li class="item4"><span>{{reportVo.orderItem}}</span></li>-->
						<li class="item1" >
							<span class="orderName">标本条码：{{reportVo.specimenBarcode}}</span>
							<span class="right">
								<i class="icon iconfont icon-warning"></i>
								<span class="number">{{reportVo.abnormalNumber}}</span>项异常
							</span>
						</li>
						<li class="item2">
							解读提示：点击带异常（红色）的数据可查看指示解读，解读内容来自第三方医学服务网站公开内容，仅供参考，不作为诊断依据。
						</li>
						<li class="item3">
							<table>
								<tr>
									<th>指标项</th>
									<!--<td>代码</td>-->
									<th>检测值</th>
									<th>参考范围</th>
									<th>单位</th>
								</tr>
								<tr @tap="readAbnormal(report.id,report.isAbnormal,$event)" v-for="report in reportVo.reportDetailVos" v-bind:id="report.id">									
									<td :class="{'red':report.isAbnormal}"><span class="noItemtip" :class="{'hidden':isTip}">此项目暂无解读!</span>{{report.name?report.name:'/'}}</td>
									<!--<td :class="{'red':report.isAbnormal}">{{report.code}}</td>-->
									<td :class="{'red':report.isAbnormal}">{{report.measureValue?report.measureValue:'/'}}</td>
									<td :class="{'red':report.isAbnormal}">{{report.referenceVaule?report.referenceVaule:'/'}}</td>
									<td :class="{'red':report.isAbnormal}">{{report.unit?report.unit:'/'}}</td>
								</tr>
							</table>
						</li>
					</ul>
				</div>
				<!--弹出框-->
				<div class="explanation" v-cloak v-if="showModel">
					<div class="mask">
						<div class="title basic-bg-color">
							<span>{{abnormalRes.labProjectName}}</span>
							<i class="icon iconfont icon-shanchu" @tap="showModel=false"></i>
						</div>
						<div class="explanationDetail">
							<div class="abnormalBox" v-if="abnormalRes.influenceFactor">
								<p><span class="blueSign"></span><span>临床意义</span></p>
								<p>{{abnormalRes.influenceFactor}}</p>
							</div>
							<div class="abnormalBox" v-if="abnormalRes.resultExplain">
								<p><span class="blueSign"></span><span>观察重点</span></p>
								<p>{{abnormalRes.resultExplain}}</p>
							</div>
							<div class="abnormalBox" v-if="abnormalRes.abnormalResultExplain">
								<p><span class="blueSign"></span><span>异常结果解读</span></p>
								<p>{{abnormalRes.abnormalResultExplain}}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.zoom.js?time=654323"></script>
		<script src="../../js/mui.previewimage.js?time=333"></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script src="../../js/vue.js"></script>
		<script src="../../js/cmms.js?time=333"></script>
		<script>
			mui.previewImage();
//			mui.plusReady(function() {})
			var first = new Vue({
				el:"#report",
				data:{
					barCode:'',
					btnShow:false,
					patientName:'',
					state:'wx88001978eaac593e',
					showModel:false,//显示 弹出框
					detailMsg:[],
					orderId:'',
					specimenBarCode:'',//检验条形码
					imgSrc:[],//弹框图片显示地址
					prviewSrc:[],//预览图片地址
					tel:'',
					temp:'',
					isShow:false,
					imgModel:false,//图片弹出框
					abnormalRes:[],
					isTip:true,
					tid:''
				},
				computed: {
		        	newVoList: function() {
		        		for(let i of res.voList){
		        			return (this.i.consumablesName || "").split(",")
						}
		        	}
		       },
				mounted(){
//					var vConsole = new VConsole();
					this.getUrl();
//					this.readReport();
				},
				methods:{
					/*获取微信端URI后的code和state*/
					getUrl(){
						let _this=this;
						var url = location.search; //获取url中"?"符后的字串    
						var theRequest = new Object();  
//						console.log(url);
					   	if (url.indexOf("?") != -1) {   
					      var str = url.substr(1);  
//					      console.log(str);
					      strs = str.split("&");  
					      for(var i = 0; i < strs.length; i ++) {   
					         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);   
					      } 
					   	}   
					   	console.log(theRequest);
					   	_this.state = theRequest.state;
					},
					search(){
						let _this = this;
//						_this.isShow = true;
						if(_this.patientName==''){
							mui.alert('患者姓名不能为空！');
							return false;
						}else if(_this.barCode==''){
							mui.alert('条码不能为空！');
							return false;
						}
						mui.ajax({
							url:AT.baseUrl+"/partner-sale/orderAndReport/data",
							data:{
								wechatAppId:_this.state,
								patientName:_this.patientName,
								specimenBarCode:_this.barCode
							},
							dataType:'json',
							type:'post',
							timeout:10000,//超时时间设置为10秒；
							headers:{'Content-Type':'application/json'},
							success:function(data){
								console.log(data);
								if(data.code=='0'){
									_this.detailMsg = data.data;
//									console.log(_this.detailMsg);
									_this.attachmentIds = _this.detailMsg.attachmentIds;
//									console.log(_this.attachmentIds);
									
									let pdfId=_this.attachmentIds;
									for(let i of pdfId){
										let url='https://api.lis.ulabcare.com/api/common/common/downLoadFile?type=0&fileName=1&attachId='+i.attachmentId;
										_this.prviewSrc.push(url);
									}
									_this.imgModel = true;
									
									_this.isShow = true;
								}else{
									console.log('查询失败！');
									mui.toast(data.msg);
								}
						    }
						});
					},
					readAbnormal(oid,abnormalFlag,event){
						let _this = this;
						let tid = event.currentTarget.id;
						if(abnormalFlag){
							AT.muiAjaxDoctor('/partner-sale/order/getExplain','post',{
								id:oid
							},function(realData){
//								console.log(realData);
								_this.abnormalRes = realData;
								if(_this.abnormalRes.influenceFactor||_this.abnormalRes.resultExplain||_this.abnormalRes.abnormalResultExplain){
									_this.showModel=true;
								}else{
									_this.showModel=false;
									event.target.parentNode.firstChild.firstChild.style.display='block';
									const timer = setTimeout(() =>{                    
										event.target.parentNode.firstChild.firstChild.style.display='none';
									}, 2000);  
									_this.$once('hook:beforeDestroy', () => {            
									    clearTimeout(timer);                                    
									});
								}
							});
						}else{
							
						}
					},
				}
			});
		</script>
	</body>
</html>